<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">添加留样记录</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span>就餐类型</span>
            <div class="froms">
              <el-select v-model="formName.type" placeholder="请选择">
                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </li>
  
          <li>
            <span>就餐日期</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="formName.dataValue" name="dataValue" @click="openPickerdDate()" v-validate="'required'" :class="{'is-danger': errors.has('dataValue')}">
              </el-input>
              <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValue" @cancel="handleCanceDate" @confirm="handleConfirmDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>餐次</span>
            <div class="froms">
              <el-select v-model="formName.timeType" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </li>
          <!-- <li>
                <span>
                留样人员</span>
                <div class="froms">
                  <input type="text" name="msg" @click="handleClick" v-model="msg" v-validate="'required'" :class="{'is-danger': errors.has('msg')}">
                  <mt-popup v-model="popupVisible" position="right" modal=false class="mint-popup-3">
                    <app-person v-on:listenToChildEvent="peopleClick" v-on:listencloseclick="clickmodl"></app-person>
                  </mt-popup>
                </div>
              </li> -->
  
          <li>
            <span>事项</span>
            <div class="froms">
              <input type="text" v-model="formName.matter">
            </div>
          </li>
          <li>
            <span>就餐人数</span>
            <div class="froms">
              <input type="text" v-model="formName.personNum">
            </div>
          </li>
        </ul>
        <div class="equipmentbox">
          <i class="el-icon-document"></i>菜单信息
          <ul class="DinnerDishesTypeTab">
            <li v-for="(item,index) in DinnerDishesTypeTab" :key="item.value">
              <span :class="{onactive:index == num}" @click="tab(index)">{{item.label}}</span>
            </li>
          </ul>
          <table class="munetable" v-for="(itemCon,index) in tabContents" v-show="index == num">
            {{itemCon}}
            <thead>
              <tr>
                <th>序号</th>
                <th>菜名</th>
                <th>原料</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(equipment,ind) in disinfect[index]" :key="ind">
                <td>{{ind+1}}</td>
                <td><input v-model="equipment.Name"></td>
                <td>
                  <el-tag v-for="tag in tags" :key="tag.Name" type="success" closable @close="handleClose(tag)">
                    {{tag}}
                  </el-tag>
  
                  <input type="text" name="msg" @click="handleClick(index,ind)" v-model="msg">
                </td>
                <td><button type="primary" class="c_f" @click="deleteSkill(index,ind)">删除</button></td>
              </tr>
              <tr>
                <td>
                  <button type="primary" class="c_f" @click="appendequipment(index)">添加</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <mt-popup v-model="popupVisible" position="right" modal=false class="mint-popup-3">
        <app-person  ref="chil"  v-on:listenToChildEvent="peopleClick" v-on:listencloseclick="clickmodl"></app-person>
      </mt-popup>
    </main>
  </div>
</template>

<script>
  import Person from '@/components/institutionPerson'
  import {
    KeepSampledAdd,
    InstitutionPerson
  } from '../../api/api';
  import {
    Popup,
    DatetimePicker
  } from 'mint-ui';
  var moment = require('moment');
  export default {
    name: 'add_mrcj',
    components: {
      'mt-popup': Popup,
      'mt-datetime-picker': DatetimePicker,
      'app-person': Person
  
    },
    data() {
      return {
        msg: '',
        getNowFormatDate: null,
        CriteriaList: [],
        options: [{
          value: 0,
          label: '早餐'
        }, {
          value: 1,
          label: '午餐'
        }, {
          value: 2,
          label: '晚餐'
        }],
        type: [{
          value: 0,
          label: '三十人以上聚餐'
        }, {
          value: 1,
          label: '食堂用餐'
        }, {
          value: 2,
          label: '重大活动保障'
        }],
        DinnerDishesTypeTab: [{
          value: 0,
          label: '主菜'
        }, {
          value: 1,
          label: '凉菜'
        }, {
          value: 2,
          label: '主食'
        }, {
          value: 3,
          label: '汤'
        }, {
          value: 4,
          label: '水果',
        }],
        //
        tags:[],
        num: 0,
        count: 0,
        tabContents: ["内容一", "内容二", "内容三", "内容四", "内容五"],
        disinfect: [
          [{
            Name: '',
            aMount: ''
          }],
          [{
            Name: '',
            aMount: ''
          }],
          [{
            Name: '',
            aMount: ''
          }],
          [{
            Name: '',
            aMount: ''
          }],
          [{
            Name: '',
            aMount: ''
          }],
        ],
  
        //时间
        pickerValue: moment().format('YYYY-MM-DD'),
        formName: {
          type: '',
          dataValue: '',
          timeType: '',
          matter: '',
          personNum: '',
  
          institutionPersonname: '',
          institutionPersonunid: '',
        },
        value: '',
        //组件
        seachtext: '',
        popupVisible: false,
        closeOnClickModal: false,
        getPerson: [],
        Enterprise: {},
        PageSize: 10,
      };
    },
    computed: {
      errors() {
        return this.$verify.$errors
      }
    },
    methods: {
       handleClose(tag) {
        this.tags.splice(this.tags.indexOf(tag), 1);
      },

      tab(index) {
        this.num = index;
      },
      //添加
      appendequipment: function(index) {
        let query = {
          Name: '',
          aMount: '',
        }
        this.disinfect[index].push(query)
  
        this.count += 1
      },
      //删除
      deleteSkill(index, ind) {
        if (ind == 0 && this.count == 0) {
          this.$message.error('不可删除，至少保留一个');
        } else {
          this.disinfect[index].splice(ind, 1);
          this.count -= 1
        }
      },
      //获取日期
      openPickerdDate() {
        this.$refs.picker.open();
      },
      handleCanceDate() {
        let _this = this
        _this.pickerValue = _this.formName.dataValue
      },
      // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
      handleConfirmDate(val) {
        let _this = this
        _this.formName.dataValue = moment(val).format('YYYY-MM-DD')
      },
  
      //弹窗
      handleClick: function(index,ind) {
        this.$refs.chil.peopleClick(index,ind)
        this.popupVisible = true
      },
      clickmodl: function() {
        this.popupVisible = false
      },
      //获取item
      peopleClick: function(data,index,ind) {
        this.tags=data.multipleSelection
        this.clickmodl();
      },
      //提交方法
      submitForm: function() {
        //定义需要传给通讯的参数：string Data--实体MorningRecord的序列化值 string UserUnid--当前操作用户标识   stringify对象解析字符串 parse字符串解析对象
        this.$validator.validateAll().then((result) => {
          if (result) {
            let varQueryData = {
              Name: this.formName.institutionPersonname,
              Unid: this.formName.institutionPersonunid,
            }
            let varEnterpriseUnid = {
              Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
              Name: JSON.parse(localStorage.getItem('auth')).enterpriseName,
            }
            let data = {
              KeepSampleTime: moment(this.formName.dataValue).format('YYYY-MM-DD 00:00:00'),
              keepSampleName: this.formName.keepSampleName,
              TimeType: this.formName.timeType0,
              DishesName: this.formName.dishesName,
              KeepSampleNum: this.formName.keepSampleNum,
              Note: this.formName.note,
              EnterprisePerson: varQueryData,
              varEnterpriseUnid: this.varEnterpriseUnid,
  
            }
            let dataoption = {
              params: {
                Data: JSON.stringify(data),
                UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
              }
            }
            //调取接口
            KeepSampledAdd(dataoption).then((res) => {
              if (res.success === true) {
                this.$message.success('保存成功');
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            }).catch(function() {
              this.$message.error('网络异常。');
            })
  
          } else {
            this.$message.error('带*号为必填项，请确认填写格式正确');
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .DinnerDishesTypeTab {
    width: 100%;
    overflow: hidden;
    margin: 20px 0px;
    li {
      width: 20%;
      text-align: center;
      float: left;
      span {
        display: inline-block;
        background: #eef1f6;
        padding: 5px 10px;
        color: #20a0ff;
      }
    }
  }
  
  .onactive {
    background: #20a0ff !important;
    color: #eef1f6 !important;
  }
  
  .uploadbox,
  .equipmentbox {
    position: relative;
    margin: 20px 0px;
    i {
      padding: 0px 10px;
    }
  }
  
  .img-btnbox {
    position: absolute;
    right: 10px;
    top: -5px;
    width: 25px;
    height: 25px;
    overflow: hidden;
  }
  
  .showclick {
    position: relative;
    cursor: pointer;
    color: #888;
    background: url("../../img/add.png") no-repeat;
    background-size: contain;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    input {
      opacity: 0;
      filter: alpha(opacity=0);
      cursor: pointer;
      width: 35px;
      height: 100%;
    }
  }
  
  .el-radio__label {
    margin-top: 2px;
  }
  
  .disabled {
    display: none
  }
  
  .munetable {
    width: 98%;
    margin: 10px auto;
    input {
      width: 100%;
    }
  }
</style>
